<template>
    <div class="order-report-wrapper">
        <div class="order-report-container">
            <!-- <div class="report-table-form1-line" v-if="roleId === 1"> -->
                <div class="report-table-form1-item word samll" v-if="roleId === 1" style="width: 80px">代理商:</div>
                <div class="report-table-form1-item" v-if="roleId === 1" style="width: 180px">
                    <el-select v-model="select" filterable placeholder="请选择" size="small">
                        <el-option
                            v-for="(item, index) in options"
                            :key="item.id"
                            :label="item.userName"
                            :value="index"
                        ></el-option>
                    </el-select>
                </div>
            <!-- </div> -->
            <div class="report-table-form1-item word samll" style="width: 70px">日期:</div>
            <div class="report-table-form1-item">
                <el-date-picker
                    size="small"
                    v-model="time"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="report-table-form1-item word samll" style="width: 40px">省份</div>
            <div class="report-table-form1-item" style="width: 180px;margin-right: 1px">
                <el-select v-model="cityLevelCode" placeholder="请选择" size="small">
                    <el-option
                        v-for="item in options1"
                        :key="item.regioncode"
                        :label="item.regionname"
                        :value="item.regioncode"
                    ></el-option>
                </el-select>
            </div>
            <div class="report-table-form1-item word samll" style="width: 40px">
                <el-button type="primary" size="small" @click="search">查询</el-button>
            </div>
            <!-- <el-button type="primary" size="small" @click="search(0)">日报表</el-button>
            <el-button type="primary" size="small" @click="search(1)">周报表</el-button>
            <el-button type="primary" size="small" @click="search(2)">月报表</el-button> -->
            <!-- <div class="export">
                <div class="export-box">
                    <i class="el-icon-printer export-icon"></i>导出数据
                </div>
            </div> -->
            <div class="table">
                <el-table
                    :header-cell-style="headerCellStyle"
                    size="small"
                    :data="showList"
                    border
                    style="width: 100%"
                >
                    <el-table-column prop="companyCode" label="商家编号"></el-table-column>
                    <el-table-column prop="companyName" label="商家名称"></el-table-column>
                    <el-table-column prop="companyAddress" label="商家地址"></el-table-column>
                    <el-table-column prop="chargeTotal" label="应收"></el-table-column>
                    <el-table-column prop="factAcceptCharge" label="实收金额"></el-table-column>
                    <el-table-column prop="billNumber" label="订单数量"></el-table-column>
                    <el-table-column prop="lowCharge" label="低消金额"></el-table-column>
                    <el-table-column prop="wineCharge" label="商品金额"></el-table-column>
                    <el-table-column prop="flowerChargeTotal" label="花单金额"></el-table-column>
                    <el-table-column prop="cashPayTotal" label="现金"></el-table-column>
                    <el-table-column prop="memberPayMentTotal" label="会员支付"></el-table-column>
                    <el-table-column prop="hangPayTotal" label="挂账"></el-table-column>
                    <el-table-column prop="alipayTotal" label="支付宝"></el-table-column>
                    <el-table-column prop="cloudPayTotal" label="云支付"></el-table-column>
                    <el-table-column prop="wxPayTotal" label="微信"></el-table-column>
                    <el-table-column prop="posPayTotal" label="银行卡"></el-table-column>
                    <el-table-column prop="otherPayTotal" label="自定义支付"></el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  layout="prev, pager, next, total"
                  :total="totalNum">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    data: function () {
        return {
            time: ['', ''],
            showList: [],
            currentPage: 1,
            pageSize: 10,
            totalNum: 0,
            options: [],
            options1: [],
            cityLevelCode: '',
            select: 0,
            companyCode: ''
        }
    },
    mounted () {
    },
    created () {
        this.time[0] = new Date()
        this.time[1] = new Date()
        this.companyCode = '999999'
        this.$store.dispatch('setCompanyCode', this.companyCode)
        this.getProvice()
        if (this.roleId === 1) {
            this.getAllAgent()
        } else {
            this.getCompanyBussinessInfo()
        }
    },
    watch: {
        time () {
            console.log('change')
        }
    },
    components: {},
    props: {
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        },
        nowPage () {
            return this.$store.state.page10themeManage
        },
        userName () {
            if (this.roleId === 1) {
                return this.options.length > 0 ? this.options[this.select].userName : ''
            } else {
                return this.$store.state.userName
            }
        }
    },
    methods: {
        getProvice () {
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/region/provincialLevel', params).then(response => {
                console.log('-------------------------------------------')
                console.log('调用获取行政区域返回')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用返回行政区域成功')
                    this.options1.push({
                        regioncode: '',
                        regionname: '不限'
                    })
                    response.data.forEach(item => {
                        this.options1.push(item)
                    })
                }
                if (response.ret !== '0') {
                    console.log('调用返回行政区域失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
            // 调用删除人员接口
        },
        getAllAgent () {
            this.$http.post(this.$store.state.IP + '/system/company/getAllAgent', {
                data: {
                }
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取所有代理商成功')
                    console.log(response.data)
                    response.data.forEach(item => {
                        this.options.push(item)
                    })
                    if (this.options.length > 0) {
                        this.select = 0
                    }
                }
                this.getCompanyBussinessInfo()
                if (response.ret !== '0') {
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                console.log('通讯失败')
            })
        },
        getCompanyBussinessInfo () {
            let {timestamp, signature} = this.returnTimestampAndSignature()
            let startTime = this.time[0].getTime()
            let endTime = this.time[1].getTime()
            // 权限获取
            this.$http.post(this.$store.state.yjyIP + '/business_report_service/agent/getCompanyBussinessInfo', {
                data: {
                    agentName: this.userName,
                    regionCode: this.cityLevelCode,
                    startTime: startTime,
                    endTime: endTime,
                    page: this.currentPage,
                    pageNum: 10
                },
                companycode: this.companyCode,
                timestamp: timestamp,
                signature: signature
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                response = response.body
                if (response.code === '0') {
                    this.showList = response.result.content || []
                    this.totalNum = response.result.totalElements || 0
                } else {
                    this.showList = []
                    this.totalNum = 0
                }
            })
        },
        search () {
            this.currentPage = 1
            this.getCompanyBussinessInfo()
        },
        handleCurrentChange (val) {
            // 换页展示
          this.currentPage = val
          this.getCompanyBussinessInfo()
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #e4e7ed;
    z-index: 1;
}
.el-tabs__nav-scroll
    padding 0 22px

.order-report-wrapper
    width: 100%

    .order-report-wrapper-title
        width 100%
        height 40px
        font-size 14px
        line-height 30px
        padding-left 22px
.order-report-container
    padding 15px
    background #fff
.report-table-form1-item
    display: inline-block
    vertical-align: bottom
    height: 32px
    margin-right: 25px
    line-height: 32px
    &.word
        margin-right: 0
    &.samll
        font-size: 15px
        text-align left
    &.big
        margin-right: 100px
.search-box
    position relative
.export
    color #ff5500
    font-size 14px
    text-align right
.export-box
    display inline-block
    cursor pointer
    padding 5px 15px
.export-icon
    color #ff5500
.pagination
    padding 20px 0 0
    text-align center
.table
    margin-top 15px
// other
.pt30
    padding-top 30px
.col94
    color #949494
</style>
